<template>
  <div>
    <userTitel :title="title"></userTitel>

    <!-- 卡片 -->
    <el-card shadow="never" style="padding-left: 45px">
      <el-form :inline="true">
        <!-- 一 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="订单编号 :">
              <el-input
                placeholder="请输入订单编号"
                style="width: 328px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态 :">
              <el-select
                v-model="value1"
                placeholder="请选择"
                style="width: 328px"
              >
                <el-option
                  v-for="item in order"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付费状态 :">
              <el-select
                v-model="value2"
                placeholder="请选择"
                style="width: 328px"
              >
                <el-option
                  v-for="item in pay"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <br />
        <!-- 二 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="发件人姓名 :">
              <el-input
                placeholder="请输入发件人姓名"
                style="width: 328px"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="发件人电话 :">
              <el-input
                placeholder="请输入发件人电话"
                style="width: 328px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人地址 :">
              <!-- 省 -->
              <el-select
                v-model="value3"
                placeholder="请选择省"
                style="width: 105px; margin-right: 10px"
              >
                <el-option
                  v-for="item in province"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- 市 -->
              <el-select
                v-model="value4"
                placeholder="请选择市"
                style="width: 105px; margin-right: 10px"
              >
                <el-option
                  v-for="item in city"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- 县 -->
              <el-select
                v-model="value5"
                placeholder="请选择县"
                style="width: 105px"
              >
                <el-option
                  v-for="item in county"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <br />
        <!-- 三 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="收件人姓名 :">
              <el-input
                placeholder="请输入收件人姓名"
                style="width: 328px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人电话 :">
              <el-input
                placeholder="请输入收件人电话"
                style="width: 328px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人地址 :">
              <!-- 省 -->
              <el-select
                v-model="value6"
                placeholder="请选择省"
                style="width: 105px; margin-right: 10px"
              >
                <el-option
                  v-for="item in province11"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- 市 -->
              <el-select
                v-model="value7"
                placeholder="请选择市"
                style="width: 105px; margin-right: 10px"
              >
                <el-option
                  v-for="item in city11"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- 县 -->
              <el-select
                v-model="value8"
                placeholder="请选择县"
                style="width: 105px"
              >
                <el-option
                  v-for="item in county11"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-row>
                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 表格 -->
    <el-card style="margin-top: 20px" shadow="never">
      <el-table :data="formData" border>
        <el-table-column prop="date" type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="name" label="订单编号" width="160">
        </el-table-column>
        <el-table-column prop="name" label="运单编号" width="130">
        </el-table-column>
        <el-table-column prop="name" label="下单时间" width="160">
        </el-table-column>
        <el-table-column prop="name" label="订单状态" width="90">
        </el-table-column>
        <el-table-column prop="name" label="发件人姓名" width="100">
        </el-table-column>
        <el-table-column prop="name" label="发件人电话" width="120">
        </el-table-column>
        <el-table-column prop="name" label="发件人地址" width="150">
        </el-table-column>
        <el-table-column prop="name" label="收件人姓名" width="100">
        </el-table-column>
        <el-table-column prop="name" label="收件人电话" width="120">
        </el-table-column>
        <el-table-column prop="name" label="取件类型" width="100">
        </el-table-column>
        <el-table-column prop="name" label="付费类型" width="100">
        </el-table-column>
        <el-table-column prop="name" label="付费状态" width="100">
        </el-table-column>
        <el-table-column fixed="right" prop="address" label="操作" width="85">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { nextTick } from "vue";
export default {
  name: "order-manage",
  data() {
    return {
      title: "订单管理",
      value1: "", //订单状态
      value2: "", //付费状态
      value3: "", //发件---省
      value4: "", //发件---市
      value5: "", //发件---县
      value6: "", //收件---省
      value7: "", //收件---市
      value8: "", //收件---县
      order: [], //订单状态下拉
      pay: [], //付费状态下拉
      province: [], //发件---省---下拉
      city: [], //发件---市---下拉
      county: [], //发件---县---下拉
      province11: [], //收件---省---下拉
      city11: [], //收件---市---下拉
      county11: [], //收件---县---下拉
      // 表格
      formData: [{}],
    };
  },
  methods: {
    btn() {
      nextTick(() => {
        console.log(this.$refs.refA);
      });
      this.flag = true;
    },
  },

  created() {},
};
</script>

<style scoped lang="scss">
::v-deep .el-card {
  text-align: left;
  line-height: 24px;
}
</style>
